<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ozc Journal｜完善个人信息</title>

    <!--Materialize  CSS-->
    <link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/materialize/0.97.8/css/materialize.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


    <style>
        /*左侧导航条样式*/
        header, main, footer {
            padding-left: 300px;
        }
        @media only screen and (max-width : 992px) {
            header, main, footer {
                padding-left: 0;
            }
        }
        /*背景图*/
        body {
            background-image: url(../imgs/register&loginBG.gif);
            background-repeat: repeat;
        }
    </style>
</head>
<body>



<!--表单-->
<div class="section no-pad-bot" id="index-banner">
    <div class="container">
        <br><br>

        <!--logo-->
        <div class="center-align"><img src="imgs/logo-big.png" alt="" >
        </div>
        <!--表单-->
        <div class="row">
            <form class="col s8 offset-s4" id="musicForm" action="/music" method="put" enctype="multipart/form-data">
                <div class="row">
                    <div class="input-field col s8">
                        <table class="highlight">
                            <thead>
                            <tr>
                                <th data-field="id">歌名</th>
                                <th data-field="price">操作</th>
                            </tr>
                            </thead>
                            <tbody id="musicList">

                            </tbody>
                        </table>

                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s8">
                        <input type="file" id="input-file-now" name="musicFile" class="dropify">
                    </div>
                </div>
            </form>
        </div>
        <br><br>
    </div>
</div>

<!--左侧导航条-->
<ul id="slide-out" class="side-nav fixed">
    <li>
        <div class="userView">
            <img id="slide-out-headPortrait" class="materialboxed" src="imgs/headPortrait.png"/><br>
            <span class="black-text " id="userNickName">张三</span><br>
            <span id="userEmail" class="black-text email">未填邮箱地址</span>
        </div>
    </li>
    <li><a class="waves-effect" href="/personalInfo.html"><i class="material-icons pink-text text-accent-1">perm_identity</i>完善个人信息</a>
    </li>
    <li><a class="waves-effect" href="/music.html"><i class="material-icons pink-text text-accent-1">insert_chart</i>设置个人音乐</a>
    </li>
    <li>
        <div class="divider"></div>
    </li>
    <li><a class="subheader">用户操作</a></li>

    <li><a class="waves-effect" href="/index.html"><i class="material-icons prefix  pink-text text-accent-1">label</i>回到首页</a>
    </li>

    <li><a class="waves-effect" href="/editJournal.html"><i class="material-icons prefix pink-text text-accent-1">mode_edit</i>编写新的日志</a>
    </li>

    <li><a class="waves-effect" href="/journals"><i
            class="material-icons pink-text text-accent-1">search</i>查看日志</a></li>
    <li id="logout"><a class="waves-effect"><i class="material-icons pink-text text-accent-1">settings_power</i>退出登陆</a>
    </li>
</ul>



<!--Materialize.js-->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/materialize/0.97.8/js/materialize.min.js"></script>

<!--弹出框-->
<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">

<!--jquery AJAX提交表单js -->
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>

<!--上传控件-->
<script src="https://cdn.bootcss.com/Dropify/0.2.2/js/dropify.min.js"></script>
<link href="https://cdn.bootcss.com/Dropify/0.2.2/css/dropify.min.css" rel="stylesheet">



<!--通用和页面JS-->
<script src="script/commonScript.js"></script>
<script src="script/music.js"></script>

<script>
    $(function () {
        music.init();
        $('.dropify').dropify({
            messages: {
                'default': '点击上传音乐或者把MP3格式的音乐拖动到这里',
                'replace': '点击继续上传',
                'remove':  '关闭',
                'error':   'Ooops, something wrong happended.'
            }
        });
    });

</script>


</body>
</html>